<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>vue 9demo</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        li{list-style: none;}
        #header{
            width: 100%;
            height: 40px;
            background-color: #666;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
        #header button{height: 100%;padding: 0 5px;position: absolute;top:0;}
        #header button:nth-of-type(1){left: 0;}
        #header button:nth-of-type(2){right: 0;}
    </style>
    <script src="./js/vue-v2.3.2.js"></script>
</head>
<body>
    <div id="app">
        <my-header custom-title="通讯录" costom-fixed>
            <button @touchstart="backBtn" slot="left">返回</button>
            <button @touchstart="homeBtn" slot="right">主页</button>
        </my-header>
        <div style="height: 1000px">

        </div>
    </div>
    <script>
        Vue.component("my-header",{
            template:`<div id="header" :style="{'position' : costomFixed ?'fixed':'relative'}">
                           <slot name="left"></slot>
                           {{customTitle}}
                           <slot name="right"></slot>

                      </div>`,
            props:{
                "customTitle":{
                    type:String,
                    default:"标题"
                },
                "costomFixed":{
                    type:Boolean,
                    default:false
                }
            }
        });
        var vm=new Vue({
            el:"#app",
            data:{
                title:"通讯录"
            },
            methods:{
                backBtn:function(){
                    alert(123);
                },
                homeBtn:function(){
                    alert(456);
                }
            }
        });

    </script>
</body>
</html>